<template>
	<view class="body">
		<view class="top">
			<view class="top-left">
			</view>
			<view class="top-right">
			</view>
		</view>
		<view class="main">
				<view class="navbar flexC ">
					<view class="navbar-left flexA">
						<image src="/static/task/新苗同学-2.png" mode=""></image>
						
					</view>
					<view class="navbar-left-task flexQ">
						<u-tabs :list="list1" lineColor="#13D069" @click="click"></u-tabs>
					</view>
					<view class="navbar-right flexA">
						<u-icon name="search" color="#13D069" size="50rpx"></u-icon>
					</view>
				</view>
				<view class="banner flexA " v-if="taskIndex==1">
					<image src="/static/task/矩形 68.png" mode=""></image>
					<image src="/static/task/矩形 68 (1).png" mode=""></image>
				</view>
				<view class="" v-else>
				</view>
			<view class="bottom " v-if="taskIndex==1">
				<u-subsection :list="list" activeColor="#13D069" :current="current"
					@change="sectionChange"></u-subsection>
				<view class="box flexQ" v-for="it in 5">
					<image src="/static/task/矩形 68 (1).png" mode=""></image>
					<view class="box-right">
						<view class="box-right-top flexC">
							<view class="">前往图书馆刷脸签到</view>
							<view class="flexA">
								<image src="/static/task/路径.png" mode=""></image>
								<view class="">29.8°</view>
							</view>
						</view>
						<view class="box-right-content">
							王守仁，汉族，幼名云，字伯安，号阳明，封新建伯，谥文成，人称王阳明。明代最著名的思想家、文学家、哲学家和军事家。
						</view>
						<view class="box-right-bottom flexA">
							<u-line-progress :percentage="30" activeColor="#13D069"></u-line-progress>
							<button class="flexA">立即领取</button>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom " v-else>
				<u-subsection :list="list" activeColor="#13D069" :current="current"
					@change="sectionChange"></u-subsection>
				<view class="box flexQ" v-for="it in 5">
					<image src="/static/task/矩形 68 (1).png" mode=""></image>
					<view class="box-right">
						<view class="box-right-top flexC">
							<view class="">前往图书馆刷脸签到</view>
							
						</view>
						<view class="box-right-content">
							王守仁，汉族，幼名云，字伯安，号阳明，封新建伯，谥文成，人称王阳明。明代最著名的思想家、文学家、哲学家和军事家。
						</view>
						<view class="box-right-bottom flexA">
							<u-line-progress :percentage="30" activeColor="#13D069"></u-line-progress>
							<button class="flexA">立即领取</button>
						</view>
					</view>
					<view class="ok">已完成</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['日常任务', '主线任务', '支线任务', "副本任务"],
				list1: [{
					name: '已完成',
				}, {
					name: '任务',
				}],
				current: 0,
				taskIndex:0
			}
		},
		methods: {
			sectionChange(index) {
				this.current = index;
				console.log(index);
			},
			click(index){
				this.taskIndex=index.index
				console.log(this.taskIndex);
			}
		}
	}
</script>

<style lang="scss">
	.top {

		&-left {
			position: fixed;
			top: -100px;
			left: -90px;
			width: 500rpx;
			height: 500rpx;
			// background-color: skyblue;
			background: linear-gradient(to right bottom, #BBEEF4, #FFFFFF);
			filter: blur(10px);
			border-radius: 50%;
			z-index: -1;
		}

		&-right {
			position: fixed;
			top: -110px;
			right: -110px;
			width: 600rpx;
			height: 600rpx;
			// background-color: skyblue;
			background: linear-gradient(to left bottom, #A9EDC8, #FFFFFF);
			filter: blur(10px);
			border-radius: 50%;
			z-index: -1;
		}
	}

	.navbar {
		margin-top: 50rpx;
		height: 100rpx;

		&-left {
			&>image {
				height: 50rpx;
				width: 150rpx;
			}

			&-task {
				// margin-left: 80rpx;
			}
		}
	}

	.banner {
		margin-top: 20rpx;

		image {
			height: 229rpx;
		}

		&>image:nth-child(1) {
			width: 65%;
		}

		&>image:nth-child(2) {
			margin-left: 20rpx;
			width: 35%;
		}
	}

	.bottom {
		
		margin-top: 20rpx;
	}

	.box {
		position: relative;
		margin-top: 30rpx;
		padding: 20rpx;
		border: 2px #13D069 solid;
		height: 170rpx;
        border-radius: 10rpx;
		&>image {
			width: 450rpx;
			height: 165rpx;
		}

		&-right {
			margin-left: 20rpx;
			&-top {
				&>view:nth-child(1) {
					font-size: 28rpx;
				}

				&>view:nth-child(2) {
					color:#fa1504;
					&>image {
						width: 24rpx;
						height: 34rpx;
					}
				}
			}

			&-content {
				margin-top: 4rpx;
				font-size: 20rpx;
			}
			&-bottom{
				margin-top: 6rpx;
				&>button{
					width: 63px;
					height: 20px;
					font-size: 16rpx;
					color: #fff;
					background: #13D069;
					margin-left: 20rpx;
				}
			}
		}
	}
.ok{
	position: absolute;
	top: 50rpx;
	right: 20rpx;
	color: red;
	 transform: rotate(30deg); 
	border: 1px red solid;
}
</style>